<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>合同新的详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        /*.bigTitle {*/
        /*height: 40px;*/
        /*padding: 6px 0;*/
        /*}*/

        .smallTitle {
            height: 20px;
            line-height: 20px;

            font-weight: bold;
            font-size: 14px;
        }

        .addPz {
            float: right;
            font-weight: normal;
            color: #4796e5;
            cursor: pointer;
        }

        .a-btn {
            cursor: pointer;
            font-size: 14px;
            right: 10px;
            margin-left: 9px;
            font-weight: bold;
        }

        .user:hover, .user.select {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .user {
            height: 30px;
            line-height: 30px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .selectBox .item {
            overflow: hidden;
            font-size: 12px;
            margin: 15px 0;
        }

        .selectBox .item .title {
            font-weight: bold;
            width: 105px;
            text-align: left;
            float: left;
        }

        .selectBox .item .boxCenter {
            float: left;
            margin-left: 50px;
        }

        .selectBox .item .boxCenter a {
            margin-right: 20px;
        }

        label {
            margin: 0;
            margin-right: 10px;
            font-weight: normal;
        }

        input[type=checkbox] {
            margin: 0;
            margin-top: 1px \9;
            float: left;
            line-height: normal;
            margin-top: 2px !important;
            margin-right: 2px !important;
        }

        input[type=radio] {
            margin: 0;
            margin-top: 1px \9;
            float: left;
            line-height: normal;
            margin-top: 6px !important;
            margin-right: 2px !important;
        }

        .contractDetail {
            font-size: 14px;
            line-height: 28px;
            font-family: 宋体;
        }

        /*合同样式*/
        .conTitle {
            font-family: 宋体;
            font-size: 20px;
            font-weight: bold;
            line-height: 2;
            margin: 0pt;
            orphans: 0;
            text-align: center;
            /*border-top: 1px solid #333;*/
            widows: 0;
        }

        .conTwoTitle {
            font-family: 宋体;
            font-size: 14px;
            font-weight: bold;
            font-size: 11pt;
            line-height: 150%;
            margin: 0pt;
            orphans: 0;
            text-align: right;
            overflow: hidden;

        }

        .conTwoTitleBox {
            float: right;
            width: 120px;
            text-align: left;
        }

        .conTable {
            border-collapse: collapse;
            margin: 0 0 0 auto;
            border-left: 1px solid #000000;
            border-top: 1px solid #000000;
            font-size: 14px;
            font-family: 宋体;
            table-layout: fixed
        }

        .conTable td {
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
        }

        .conTable .td-title {
            background-color: #bfbfbf;
            font-family: 宋体;
            font-size: 14px;
            /*font-weight: bold;*/
            height: 28px;
            vertical-align: middle;
            text-align: center;
        }

        .conTable .td-value {
            font-family: 宋体;
            font-size: 14px;
            line-height: 1.5;
            font-weight: bold;
            height: 28px;
            vertical-align: middle;
            text-align: left !important;
            color: red !important;
            padding: 0 6px !important;
        }

        .conTable .td-value span {
            margin-left: 2px;
        }

        .conIndent {
            text-indent: 28px;
        }

        .conIndent2 {
            text-indent: 49px;
        }

        .sign {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .sign .item {
            height: 28px;
            line-height: 28px;
        }

        .sign .title {
            text-align: right;
        }

        .sign .left {
            float: left;
            margin-left: 28px;
        }

        .sign .right {
            float: left;
            margin-left: 200px;
        }

        .confidentiality {
            font-weight: bold;
        }

        .confidentiality .right {
            margin-right: 200px;
            width: 300px;
            text-align: center;
            float: right;
        }

        .confidentiality .line {
            border: 2px dashed #333;
        }

        .sign .title {
            float: left;
        }

        .sign .value {
            float: left;
            width: 200px;
            border-bottom: 1px solid #333;
            height: 28px;
            margin-left: 5px;
        }

        .selectModel {
            border: none;
            border-bottom: 1px solid red;
            color: red;
            text-align: left;
        }

        .table-detail input[type=text], .table-detail input[type=number] {
            padding: 0 !important;
        }

        .vEdit[contenteditable=true] {
            user-modify: read-write-plaintext-only;
        }

        .vEdit:empty:before {
            content: attr(placeholder);
            display: block;
            color: #ccc;
        }

        .vEdit {
            height: 100%;
            min-width: 100%;
            line-height: 28px;
            min-height: 30px;
            display: inline-block;
            text-indent: 0px;
            word-break: break-all;
            outline: none;
            user-select: text;
            white-space: pre-wrap;
            text-align: left;

            vertical-align: middle;
        }

        .smallEdit1 {
            line-height: 36px;
            color: red;
        }

        .smallEdit {
            line-height: 1;
            border-bottom: 1px solid red;
            color: red;
        }

        .btn-info {
            background-color: #4796e5;
            border-color: #4796e5;
        }

        span.lineOne {
            line-height: 28px;
            height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .table-detail td.twoLine {
            line-height: 1.5 !important;
            padding: 3px 0 !important;
        "
        }

        .table-detail select {
            text-indent: 0 !important;
            padding-left: 0 !important;
            margin-left: -4px !important;
        }

        select {
            height: 24px;
            line-height: 24px;
            width: 91%;
            font-family: 宋体;
            font-size: 14px;
            vertical-align: middle;
            text-align: left !important;
            color: red !important;
            padding: 0 6px !important;
            text-indent: 0 !important;
            padding-left: 0 !important;
            margin-left: -4px !important;
        }

        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 10px;
            height: 10px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .moreListData {
            position: absolute;
            top: 30px;
            z-index: 111;
            display: none;
        }

        .moreListData .item {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .moreListData .item span {
            margin-right: 5px;
        }

        .ui_main {
            vertical-align: top;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            color: gray;
            font-weight: normal;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: gray;
            font-weight: normal;
        }

        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: gray;
            font-weight: normal;
        }
    </style>
</head>
<body>
<!-- Content Header (Page header) -->
<section class="content" id="app">
    <div class="oaLoad">
        <div class="loadGif" id="areaProgress"></div>
    </div>
    <div v-html="html"></div>
    <div  class="contract" style="width: 80%; float: left;">
        <!--审批进度-->
        <table class="table-detail" style="width: 100%;table-layout: auto;margin-top:30px ;">
            <tr>
                <td class="td-title" colspan="5" style="text-align: center;width: 100%;">审批进度</td>
            </tr>
            <tr>
                <td class="td-title" style="width:16%;">审核顺序</td>
                <td class="td-title" style="width:17%;">审核人员</td>
                <td class="td-title" style="width:16%;">审核状态</td>
                <td class="td-title" style="width:17%;">审核时间</td>
                <td class="td-title">审核意见</td>
            </tr>
            <tr v-for="(item,i) in auditors">
                <td>
                    <!--<span v-if="pageType=='edit'" class="span-btn">
                        <span style="font-size:20px;"
                              @click="addItem('auditors','Audit')"> + </span>
                        <span style="font-size:20px;"
                              @click="delItem('auditors',i,'审核人')"> - </span>
                    </span>-->
                    <span>第{{i+1}}审核人</span>
                </td>
                <td style="text-align: left;">
                    <!--<span>{{item.roleName}}-{{item.auditorName}}</span>-->

                    <input v-if="pageType!='look'&&i!=2" class="auditorName" type="text"
                           style="text-align: center !important;"
                           :value="auditName(item.roleName,item.auditorName)" :idx="i" v-autoinput="i"
                           @keyup.delete="deleteAuditor(item)"/>

                    <span v-else style="padding-left: 12px;">{{item.auditorName}}-{{item.roleName}}</span>
                </td>
                <td>
                        <span v-if="item.auditFlag==0"
                              style="color:red;">{{convertAuditFlagToName(item.auditFlag)}}</span>
                    <span v-else>{{convertAuditFlagToName(item.auditFlag)}}</span>
                </td>
                <td>{{item.auditTime}}</td>
                <td>{{item.auditAdvise}}</td>
            </tr>
            <tr>
                <td class="td-title" style="width:16%;">抄送人</td>
                <td colspan="5" style="text-align: left;padding-left: 6px !important;">
                    <div id="user" style="padding-left:6px;"
                         v-on:click.stop="inputFocus('txtCopier')">
                        <div v-for="(user,i) in copiers" class="user"
                             v-bind:class="{ select: copierSelectedIdx == i }"
                             v-on:click="selectUser(i,'copierSelectedIdx')">{{user.copierName}};
                        </div>
                        <input v-if="pageType!='look'" class="pull-left copier" id="txtCopier"
                               style="width:100px;margin-top: 4px !important;" v-autoinput="1"
                               type="text" @keyup.delete="deleteUser"/>
                    </div>
                </td>
            </tr>
        </table>
        <!--审批历史-->
        <table class="table-detail" style="width: 100%;table-layout: auto;"
               v-if="pageType!='add'&&history.length>0">
            <tr>
                <td class="td-title" colspan="5" style="text-align: center;width: 100%;">历史驳回记录</td>
            </tr>
            <tr>
                <td class="td-title" style="width:16%;">驳回人员</td>
                <td class="td-title" style="width:17%;">驳回时间</td>
                <td class="td-title">驳回原因</td>
            </tr>
            <tr v-for="(item,i) in history" v-if="item.auditFlag!=-1">
                <td>
                    <span>{{item.auditorName}}</span>
                </td>
                <td>{{item.auditTime}}</td>
                <td style="text-align: left;padding-left: 4px !important;">{{item.auditAdvise}}</td>
            </tr>
        </table>
        <div class="div-btn text-center">
            <input type="button" value="通过" class="btn oaBtn btn-sm" style="margin-top: 5px;"
                   @click="audit('tongguo')"
                   v-if="userId==contract.main.currentAuditorId&&contract.main.auditFlag==0">
            <input type="button" value="驳回" class="btn oaBtn btn-sm" style="margin-top: 5px;"
                   @click="audit('bohui')"
                   v-if="userId==contract.main.currentAuditorId&&contract.main.auditFlag==0">
        </div>
    </div>
</section>


<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>

<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script src="Template.js?t=42e28def"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    function refresh() {
        location.reload();
    }
</script>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                copierSelectedIdx: -1,
                userId: $.wyui.page.urlParams.userId ? $.wyui.page.urlParams.userId : getCurrentUser().id,
                auditType: $.wyui.page.urlParams.auditType ? $.wyui.page.urlParams.auditType : 'look',
                mainId: $.wyui.page.urlParams.mainId ? $.wyui.page.urlParams.mainId : '',
                html: '',
                openType: $.wyui.page.urlParams.openType ? $.wyui.page.urlParams.openType : 'top',
                auditors: [],
                copiers: [],
                history: [],
                contract:
                    {
                        main: {city: ""}
                    },
                pageType: $.wyui.page.urlParams.pageType,//页面类型
                main: {},
            },
            methods: {
                convertAuditFlagToName: function (auditFlag) {
                    //auditFlag:-1,0,1,2,3,4,5,6
                    switch (Number(auditFlag)) {
                        case -1:
                            return "未审核";
                            break;
                        case 0:
                            return "待审核";
                            break;
                        case 1:
                            return "已通过";
                            break;
                        case 2:
                            return "已驳回";
                            break;
                        default :
                            break;
                    }
                },
                audit: function (type) {
                    var that = this;
                    if (type == 'tongguo') {
                        if (!confirm("确定要通过吗？")) {
                            return;
                        }
                        advise = '同意！';
                        $.wyui.postLoadMethod(urlConfig.contractWyp.applyAudit, {
                                id: that.mainId,
                                auditFlag: 1,
                                advise: '同意!',
                                userId: that.userId
                            },
                            function (r) {
                                //"/contractMain/updateFileOss.json",

                                if (that.openType == 'top') {
                                    var pageId = top.getActivePageId();
                                    top.refreshTabByName("合同管理", "no");
                                    top.closeTabByPageId("zzht");
                                    top.closeTabByPageId(pageId);
                                } else {
                                    // parent.refresh();
                                    refresh();
                                    //api.close();
                                }
                            }, false, true);
                    } else {
                        that.copierReturn();
                        //alert('请填写审核意见');
                        /*if (that.openType == 'dialog') {
                            api.close();
                        }*/
                        return;
                    }
                },
                copierReturn: function () {
                    var that = this;
                    $.dialog({
                        content: 'url:/page/apply/contractWyp/copierReturnReason.html?id=' + that.mainId + "&pageType=1&openType=" + that.openType + "&t=" + new Date(),
                        title: '填写驳回原因',
                        width: 300,
                        height: 200,
                        max: false,
                        min: false,
                        lock: true
                    });
                },
            },
            mounted: function () {
                var that = this;
                var mainId = $.wyui.page.urlParams.mainId;
                $.wyui.postMethod("/contractMainWyp/getHtmlHistory.json", {mainId: mainId}, function (r) {
                    if (r.result) {
                        that.html = r.result.html;
                        setTimeout(function () {
                            $("#auditHistory").hide();
                            $('#auditSchedule').hide();
                            $('#clickInput').hide();
                            $(".oaLoad").hide();
                        }, 300);
                    }
                }, false);
               // if (that.auditType && that.auditType == 'audit') {
                    $.wyui.postLoadMethod("/contractMainWyp/selectContractById.json", {id: mainId}, function (data) {
                        that.contract = data;
                        that.auditors = data.auditors;
                        that.copiers = data.copiers;
                        that.history = data.history;
                    }, false, true);
               // }
            },
        })
    ;
</script>
</body>
</html>
